<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      v-model="form"
      ref="crud"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
    </avue-crud>
  </basic-container>
</template>

<script>
import { option } from '@/option/tenant/supplier/history-info'
import { getPage } from '@/api/supplier/history'

export default {
  data() {
    return {
      form: {},
      query: {},
      loading: false,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      option: { ...option, operatingButtons: this.getOperatingButtons },
      data: []
    }
  },
  methods: {
    getOperatingButtons(row) {
      const view = { text: '详情', callback: this.handleView }
      return [view]
    },
    handleView(row) {
      this.$quickDrawer({
        title: '详情',
        width: '90%',
        component: require('@/views/tenant/supplier/info/components/history-view').default,
        props: { type: 'view', params: row }
      })
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    refreshChange() {
      this.onLoad(this.page, this.query)
    },
    onLoad(page, params = {}) {
      this.loading = true
      getPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data
        this.page.total = data.total
        this.data = data.records
        this.loading = false
      })
    }
  }
}
</script>

<style></style>
